<template>
	<view class="statistics">
		<titleName :name="name"></titleName>
		<view class="title-bgc"></view>
		<view class="content-wrap">
			<view style="padding-bottom: 10rpx;">
				<view style="background-color: #fff;padding-top: 24rpx;padding-bottom: 2rpx;margin-bottom: 28rpx;">
					<view class="search-wrap">
						<view class="ipt-wrap">
							<view style="margin-left: 10rpx;flex-shrink: 0;">
								<uni-data-picker placeholder="区域" v-model="queryParams.district" class="data-picker"
									popup-title="请选择所在地区" :localdata="dataTree" @change="sessionChange">
								</uni-data-picker>
							</view>
							<view class="line">
							</view>
							<view style="flex-shrink: 0;">
								<uni-data-select placeholder="危废类型" style="width: 90rpx;"
									v-model="queryParams.wastetype" :localdata="adviceTypeList"
									:clear="true"></uni-data-select>
							</view>

						</view>
						<button @click="getList">查询</button>
					</view>
					<view class="date-wrap">
						<view class="date-ipt" style="width:574rpx;overflow: hidden;position: relative;">
							<template v-if="queryParams.startdate">
								<view class="date">日期</view>
								<view class="line"></view>
							</template>
							<uni-datetime-picker start-placeholder="日" rangeSeparator="—" end-placeholder="期"
								type="daterange" @change="selDate" />
							<uni-icons type="down" v-if="!queryParams.startdate" size="15"
								style="margin-left: 8rpx;position: absolute;top: 50%;transform: translateY(-50%);left: 74rpx;" />
						</view>
					</view>
				</view>
				<view class="gather-data">
					<view class="title">
						<image src="../../static/tuoyuan.png" mode=""></image>
						<text>汇总</text>
					</view>

					<view class="line">
						<view class="enterprise">
							<view class="name">产废企业数</view>
							<view class="val">{{detailMsg.num_enterprise}}</view>

						</view>
						<view class="enterprise">
							<view class="name">待更换企业</view>
							<view class="val">{{detailMsg.num_enterprise_expire}}</view>

						</view>
						<view class="enterprise">
							<view class="name">未更换企业</view>
							<view class="val">{{detailMsg.num_enterprise_near}}</view>

						</view>
					</view>
					<view class="line">
						<view class="enterprise">
							<view class="name">已更换量(kg）</view>
							<view class="val">{{detailMsg.num_waste_changed}}</view>
						</view>
						<view class="enterprise">
							<view class="name">已处置量(kg）</view>
							<view class="val">{{detailMsg.num_waste_dealed}}</view>
						</view>
						<view class="enterprise">
							<view class="name">未处置量(kg）</view>
							<view class="val">{{detailMsg.num_waste_stock}}</view>
						</view>
					</view>

				</view>
				<view style="margin-top: 23rpx;display: flex;justify-content: center;">
					<view class="change-wrap">
						<view class="title">
							<view class="name">
								<image src="/static/tuoyuan.png" mode=""></image>
								<text>更换量(kg)</text>
							</view>
							<view>
								总更换量：{{detailMsg.num_graph_change_sum}}
							</view>
						</view>
						<view class="uchart">
							<DisposeChart v-model:data2="data2" />
						</view>
					</view>
				</view>
				<view style="margin-top: 23rpx;display: flex;justify-content: center;">

					<view class="change-wrap">
						<view class="title">
							<view class="name">
								<image src="/static/tuoyuan.png" mode=""></image>
								<text>处置量(kg)</text>
							</view>
							<view>
								总处置量：{{detailMsg.num_graph_deal_sum}}
							</view>
						</view>
						<view class="uchart">
							<ChangeChart v-model:data1="data1" />
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import ChangeChart from './changeChart.vue'
	import DisposeChart from './disposeChart.vue'
	import titleName from '../../components/titleName.vue'
	import http from '../../request/index'
	import uploadFile from '../../request/uploadFile.js'
	import {
		onShow,
	} from '@dcloudio/uni-app'
	import {
		nextTick,
		reactive,
		ref
	} from 'vue'
	onShow(() => {

	})

	let dataTree = ref()
	let queryParams = reactive({})
	let data1 = ref({
		s: 'b'
	})
	let showLine = ref('none')
	let data2 = ref({})
	let detailMsg = reactive({})
	let name = "统计"
	let adviceTypeList = ref([])
	let sessionChange = (e) => {

		let id = e?.detail?.value[e.detail.value.length - 1]?.value

		queryParams.district = id
	}

	let getList = () => {
		http({
			url: '/admWasteMonthSum/monthGraph',
			data: {
				...queryParams
			}
		}).then((res) => {
			if (res.code == 0) {
				data1.value = {
					date: res.data.date_deal_x,
					data: res.data.data_deal_y1
				}
				// data1.value.date = data1.value.date.map((item, index) => {
				// 	if (index == 0 || index == 5 || index == 9 || index == 16) {
				// 		return item
				// 	} else {
				// 		return ''
				// 	}
				// })
				data2.value = {
					date: res.data.date_change_x,
					data: res.data.data_change_y1
				}
				console.log(data1.value, 'data1');
				detailMsg.num_enterprise = res.data.num_enterprise
				detailMsg.num_enterprise_expire = res.data.num_enterprise_expire
				detailMsg.num_enterprise_near = res.data.num_enterprise_near
				detailMsg.num_graph_change_sum = res.data.num_graph_change_sum.toFixed(2)
				detailMsg.num_graph_deal_sum = res.data.num_graph_deal_sum.toFixed(2)
				detailMsg.num_waste_changed = res.data.num_waste_changed.toFixed(2)
				detailMsg.num_waste_dealed = res.data.num_waste_dealed.toFixed(2)
				detailMsg.num_waste_stock = res.data.num_waste_stock.toFixed(2)
			}
			console.log(res, 'res');
		})
	}
	getList()
	let selDate = (e) => {

		if (e.length == 0) {
			showLine.value = 'none'
			queryParams.startdate = ''
			queryParams.enddate = ''
			return
		}
		queryParams.startdate = e[0]
		queryParams.enddate = e[1]
		showLine.value = 'block'
	}

	function mapTree(data) {
		console.log(data, 'data');
		if (data.length <= 0) return

		return data.map((item) => {
			item.text = item.regionname
			item.value = item.id
			if (item.lstSubNodes && item.lstSubNodes.length > 0) {
				item.children = item.lstSubNodes
				for (var i = 0; i < item.lstSubNodes.length; i++) {

					item.children[i].text = item.lstSubNodes[i].regionname
					item.children[i].value = item.lstSubNodes[i].id
					if (item.lstSubNodes[i].lstSubNodes && item.lstSubNodes[i].lstSubNodes.length > 0) {
						mapTree(item.lstSubNodes[i].lstSubNodes)
					}


				}
			}
			return item

		})

	}

	http({
		url: '/listitem/getmodule',
		data: {
			module: 'B03'
		}
	}).then((res) => {
		if (res.code == 0) {
			let data = res.data
			adviceTypeList.value = data.map((item) => {
				return {
					text: item.name,
					value: item.id
				}
			})

		}

	})
	http({
		url: '/region/datalisttree'
	}).then((res) => {
		if (res.code == 0) {
			let data = res.data
			let cc = mapTree(data)
			dataTree.value = data



		}

	})
</script>

<style lang="scss" scoped>
	:deep(.uni-select) {
		border: none !important;

		padding-left: 0rpx;
		font-weight: 400;
		font-size: 25rpx;
		color: #333333;

	}

	:deep(.range-separator) {
		background-color: #fff;
		display: v-bind('showLine');
		height: 65rpx !important;
		line-height: 63rpx !important;
	}

	:deep(.uniui-down) {
		color: #999 !important;
	}

	:deep(.icon-calendar) {
		display: none;
	}

	:deep(.uniui-clear) {
		font-size: 48rpx !important;
	}

	:deep(.uni-date) {
		background-color: #fff;
		// width: auto !important;
		// flex: none !important;
		overflow: hidden;
	}

	:deep(.text-center) {
		height: 64rpx;
		line-height: 64rpx;
	}

	:deep(.uni-date-x) {

		flex: none;
		background-color: none;
		height: 63rpx;
		line-height: 63rpx;
	}

	:deep(.uni-date__x-input) {
		font-weight: 400;
		font-size: 25rpx;
		color: #333333;
		text-align: center;
		flex: none;
		background-color: #fff;
	}

	:deep(.input-value-border) {
		border: none !important;
	}

	:deep(.uni-date-editor--x) {
		border: none;
	}

	.statistics {
		width: 100vw;
		height: 100vh;

		.title-bgc {
			width: 750rpx;
			height: 160rpx;
			background: #0874FA;
		}

		.content-wrap {
			background-color: #F3F5F7;
			width: 100vw;
			height: calc(100vh - 160rpx);
			display: flow-root;
			overflow: auto;
			padding-bottom: 56rpx;
		}

		.date-wrap {
			padding-left: 22rpx;
			margin-bottom: 20rpx;
			margin-top: 14rpx;

			.date-ipt {
				display: flex;
				max-width: 574rpx;
				align-items: center;
				border: 1px solid #ccc;
				border-radius: 34rpx;
				padding-left: 30rpx !important;

				.date {
					color: #333;
					font-size: 24rpx;
				}

				.line {
					width: 1rpx;
					height: 30rpx;
					background-color: #9eaaba;
					margin-left: 15rpx;
					margin-right: 15rpx;
				}
			}
		}

		.search-wrap {
			display: flex;
			align-items: center;

			// margin-bottom: 22rpx;
			padding: 0 22rpx;
			justify-content: space-between;

			.ipt-wrap {
				width: 574rpx;
				height: 67rpx;
				background: #FFFFFF;
				border-radius: 34rpx;
				display: flex;
				align-items: center;
				border: 1px solid #ccc;

				.line {
					width: 1rpx;
					height: 35rpx;
					background: #E8E8E8;
					margin-left: 15rpx;
					margin-right: 20rpx;
				}
			}

			button {
				width: 118rpx;
				height: 67rpx;
				background: #0874FA;
				border-radius: 34rpx;
				font-weight: 400;
				font-size: 25rpx;
				color: #FFFFFF;
				line-height: 67rpx;

			}
		}

		.change-wrap {
			width: 697rpx;
			height: 529rpx;
			background: #FFFFFF;
			border-radius: 21rpx;
			display: flow-root;

			padding-bottom: 80rpx;

			.uchart {
				height: 100%;
				// height: calc(529rpx - 70rpx);
				width: 100%;
			}

			.title {
				margin-top: 29rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				flex-wrap: nowrap;
				padding-right: 34rpx;

				.name {

					image {
						width: 52rpx;
						height: 32rpx;
						margin-left: 27rpx;
						margin-right: 18rpx;
					}

					text {

						font-weight: 500;
						font-size: 30rpx;
						color: #000000;

					}
				}

				view {

					font-weight: 400;
					font-size: 23rpx;
					color: #333333;

				}
			}
		}

		.gather-data {
			padding-top: 31rpx;
			width: 697rpx;
			height: 356rpx;
			background: #FFFFFF;
			border-radius: 21rpx;
			margin: 0 auto;

			.title {
				image {
					width: 52rpx;
					height: 32rpx;
					margin-left: 27rpx;
					margin-right: 18rpx;
				}

				text {

					font-weight: 500;
					font-size: 30rpx;
					color: #000000;
				}
			}

			.line {
				margin-top: 40rpx;
				display: flex;
				padding-left: 60rpx;
				padding-right: 30rpx;
				justify-content: space-between;

				.enterprise {
					display: flex;
					flex-direction: column;
					align-items: center;
					width: 180rpx;

					.name {
						font-weight: 400;
						font-size: 23rpx;
						color: #666666;
					}

					.val {
						margin-top: 4rpx;
						font-weight: 400;
						font-size: 35rpx;
						color: #333333;

					}
				}
			}
		}


	}
</style>